<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Love between Us</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
</head>

<body>
    <audio src="./music.mp3" autoplay="true" loop="loop"></audio>
    <div id="back">
        <div class="mask"></div>
        <!-- 设置展示的图片，github pages不能有后台程序只能一条一条手动添加了 囧 -->
        <div id="carousel"  class="carousel slide carousel-fade carousel-position">
            <div class="carousel-inner" style="width: 100%;height: 100%;" id="background">
                <div class="item active" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background:url(./img/2013-复读期间的照片.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/2013-老乡鸡生涯结束.jpg) ;background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/2014-陪你回复读班级看看.jpg) ;background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/池州赔罪.jpg) ;background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/池州学院图书馆.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/都市水乡-love.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/都市水乡一起去偷小区的石榴.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/杭州西湖-P41002-114952.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/合肥野生动物园.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/美女姐姐.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/魔漫相机.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/情人节送花.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/我们的小象儿子.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/芜湖-大椰子.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/芜湖-游乐.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/心形玫瑰-20141203194605.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/野生动物园.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/野生动物园遇到的老爷爷老奶奶.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/猪婆家-冬天 2017-01-23 123211.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/自行车上的幸福.jpg);background-size: cover;"></div>
                </div>
                <div class="item" style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;background-image: url(./img/野生动物园遇到的老爷爷老奶奶2.jpg);background-size: cover;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal show" style="top:24%;">
        <div class="modal-dialog" style="opacity: .9">
            <div class="modal-content" style="opacity:.85">
                <div class="modal-header">
                    <h1 class="text-center" style="color: #A94442;font-family: 'JournalRegular', Arial, sans-serif;font-size: 7rem;">the times we together</h1>
                    <p class="text-center small-title">大狗熊 & 小狗熊</p>
                    <p class="text-center small-title">LOVING ON THE WAY</p>
                </div>
                <div class="modal-body text-center" style="line-height: 1.5rem;font-family: 'JournalRegular', Arial, sans-serif;font-size: 3rem;">
                    <p>
                        <span id="day" class="time-font"></span><span style="color:#A94442">/&nbsp;</span><span id="hour" class="time-font"></span><span style="color:#A94442">/&nbsp;</span><span id="minute" class="time-font"></span><span style="color:#A94442">/&nbsp;</span><span id="second" class="time-font"></span>
                    </p>
                    <p>
                        days/hours/min/sec
                    </p>
                    <p class="text-center" style="color:#A94442;font-size: 17px" id="say"></p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/count-time.js"></script>
    <script>
    $(function() {
        //设置起始日期
        countTime('2013/08/13 20:00', 'day', 'hour', 'minute', 'second');
        var days = $('#day').text();

        // 设置标题
        if (parseInt(days / 365) != 0) {
            $(document).attr("title", "在一起" + parseInt(days / 365) + "年,感谢相伴。");
        } else if (parseInt(days / 30) != 0) {
            $(document).attr("title", "在一起" + parseInt(days / 30) + "个月,感谢相伴。");
        } else
            $(document).attr("title", "在一起" + days + "天,感谢相伴。");

        //设置每一张图片对应的文字
        var says = new Array(
            "all，一路相伴,感谢有你",
            "最难忘的一个背影",
            "陪你回你复读班级看看",
            "池州负荆请罪",
            "池州学院图书馆",
            "都市水乡-love",
            "都市水乡一起去偷小区的石榴",
            "杭州西湖，你的背影",
            "合肥野生动物园",
            "我的美女大人",
            "你的恶搞-魔漫相机",
            "情人节给你送的花-让我老哥代送的",
            "我们的小象儿子",
            "芜湖-大椰子",
            "芜湖-一起走路",
            "杭州，心形玫瑰-我给你手折的爱心玫瑰",
            "合肥，第一次陪你去野生动物园",
            "合肥，蜀山-野生动物园遇到的老爷爷老奶奶",
            "肥西，上派-你家冬天的楼台",
            "杭州，自行车上的幸福",
            "希望我们可以和这对爷爷奶奶一样，时间不停，爱你不止，携子之手，白头偕老"
        );


        var start = function() {
            var index = 0;
            var rate = 6000;
            $('#say').text(says[(index++) % says.length]);
         	var _play = function () {
         		$('#say').hide();
                $('#say').text(says[(index++) % says.length]);
                $('#say').fadeToggle();
                $('#carousel').carousel('next');
         	};
            setInterval(_play, rate);
        }();

    });
    </script>
</body>

</html>
